<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>库存查询 | 电动车销售系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/warehouse/stock.css">
</head>
<body>
<header class="dashboard-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="h3 mb-0"><i class="bi bi-bicycle"></i> 电动车销售管理系统</h1>
                <p class="mb-0 opacity-75">仓库管理 - 库存查询</p>
            </div>
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <span class="d-none d-md-inline">仓库管理员</span>
                    <div class="badge bg-light text-dark">
                        <i class="bi bi-person-circle me-1"></i> 仓库管理员
                    </div>
                </div>
                <div class="dropdown">
                    <button class="btn btn-light rounded-circle p-1" type="button" data-bs-toggle="dropdown">
                        <i class="bi bi-gear fs-5"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/change_password.jsp"><i class="bi bi-lock me-2"></i> 修改密码</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item text-danger" href="${pageContext.request.contextPath}/LogoutServlet"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="container py-4">
    <a href="/web/warehouse/warehouse_admin.jsp" class="back-link">
        <i class="bi bi-arrow-left"></i> 返回仓库管理菜单
    </a>

    <div class="dashboard-card shadow">
        <div class="card-header">
            <div>
                <h5 class="card-title"><i class="bi bi-boxes me-2 text-primary"></i>库存查询</h5>
                <p class="card-subtitle">当前库存信息总览</p>
            </div>
        </div>

        <div class="card-body">
            <!-- 库存统计卡片 -->
            <div class="inventory-summary">
                <div class="summary-card">
                    <div class="title">库存种类</div>
                    <div class="number">${fn:length(stockList)}</div>
                    <div class="title">种电动车</div>
                </div>

                <div class="summary-card">
                    <div class="title">总库存数量</div>
                    <div class="number">
                        <c:set var="totalQuantity" value="0" />
                        <c:forEach items="${stockList}" var="stock">
                            <c:set var="totalQuantity" value="${totalQuantity + stock.quantity}" />
                        </c:forEach>
                        ${totalQuantity}
                    </div>
                    <div class="title">辆电动车</div>
                </div>

                <div class="summary-card">
                    <div class="title">最近更新</div>
                    <div class="number">
                        <c:if test="${not empty stockList}">
                            ${stockList[0].last_update}
                        </c:if>
                        <c:if test="${empty stockList}">
                            暂无数据
                        </c:if>
                    </div>
                    <div class="title">最后更新时间</div>
                </div>
            </div>

            <c:choose>
                <c:when test="${empty stockList}">
                    <div class="empty-message">
                        <i class="bi bi-box"></i>
                        <p>当前没有库存信息可显示</p>
                        <a href="/web/warehouse/warehouse_admin.jsp" class="btn btn-primary">
                            <i class="bi bi-plus-circle me-1"></i> 添加库存
                        </a>
                    </div>
                </c:when>
                <c:otherwise>
                    <div class="data-table-container">
                        <table class="data-table">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>车辆ID</th>
                                <th>库存数量</th>
                                <th>最后更新时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${stockList}" var="stock">
                                <tr>
                                    <td>${stock.id}</td>
                                    <td>${stock.v_id}</td>
                                    <td>
                                        <span class="badge bg-primary rounded-pill">${stock.quantity}</span>
                                    </td>
                                    <td>${stock.last_update}</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页导航 -->
                    <c:if test="${totalPages > 1}">
                        <div class="pagination">
                            <a href="StockQueryServlet?page=1"><i class="bi bi-chevron-double-left"></i> 首页</a>
                            <a href="StockQueryServlet?page=${currentPage - 1}"><i class="bi bi-chevron-left"></i> 上一页</a>
                            <span class="current-page">${currentPage}</span>
                            <a href="StockQueryServlet?page=${currentPage + 1}">下一页 <i class="bi bi-chevron-right"></i></a>
                            <a href="StockQueryServlet?page=${totalPages}">末页 <i class="bi bi-chevron-double-right"></i></a>
                        </div>
                    </c:if>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 添加表格行点击效果
    document.querySelectorAll('.data-table tbody tr').forEach(row => {
        row.addEventListener('click', function() {
            this.classList.toggle('table-active');
        });
    });

    // 添加页面加载动画
    document.addEventListener('DOMContentLoaded', function() {
        const rows = document.querySelectorAll('.data-table tbody tr');
        rows.forEach((row, index) => {
            row.style.opacity = '0';
            row.style.transform = 'translateY(10px)';

            setTimeout(() => {
                row.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                row.style.opacity = '1';
                row.style.transform = 'translateY(0)';
            }, 100 * index);
        });
    });
</script>
</body>
</html>